import React, { memo, useEffect } from 'react'
import { HotRecommendWrapper, ImgArapper } from "./style"
import RecommendHeader from '../../c-component/recomend-header'
import { recommendHeaderMenu } from '@/common/local-data';
import { useDispatch, useSelector } from 'react-redux';
import { actionCreators } from '../../store';
import { playNumberFormat } from '../../../../../../utils';
import { NavLink } from 'react-router-dom';

export default memo(function HotRecommend() {

    const dispatch = useDispatch();
    const { hotRecommnedList } = useSelector(state => ({
        hotRecommnedList: state.get("recommond").get('hotRecommnedList')
    }))
    useEffect(() => {
        dispatch(actionCreators.getHotRecommendAction());
    }, [dispatch]);

    console.log(`hotRecommnedList`, hotRecommnedList);

    return (
        <HotRecommendWrapper>
            <RecommendHeader title="热门推荐"
                mainLink="/discover/songs/"
                childList={recommendHeaderMenu}
                moreLink="/discover/songs/"
            ></RecommendHeader>

            <div className="item-content">
                {
                    hotRecommnedList.map((item, index) => {
                        return <div key={item.id} className={(index % 4 === 0) ? "hot-recommend-item": "hot-recommend-item hot-recommend-item-left"}>
                            <ImgArapper url={item.picUrl + "?param=140y140"}/>
                            <div className="model sprite_covor">
                                {/* <a href={"/discover/playlist?id=" + item.id} className="model-link"></a> */}
                                {/* <NavLink to={"/discover/playlist?id=" + item.id} className="model-link"/> */}
                                <NavLink to={"/discover/playlist/" + item.id} className="model-link"/>
                                <div className="bottom-wrapper recommend_hot_item_image">
                                    <div>
                                        <span className="icon recommend_hot_item_icon"></span>
                                        <span className="count">{playNumberFormat(item.playCount)}</span>
                                    </div>
                                    <button className="right-icon recommend_hot_item_icon"
                                    onClick={() => {console.log(`点击播放`)}}
                                    ></button>
                                </div>
                            </div>
                            <div className="desc">{item.name}</div>
                        </div>
                    })
                }
            </div>
        </HotRecommendWrapper>
    )
})
